<template>
  <el-drawer
    v-model="visible"
    :title="`已绑定房间列表 (${faceLockName})`"
    size="600px"
    :destroy-on-close="true"
    @closed="onDrawerClosed"
  >
    <div class="drawer-container">
      <div class="drawer-header">
        <el-button type="primary" @click="openAssociateDialog">关联房间</el-button>
      </div>
      
      <el-table
        v-loading="loading"
        :data="roomList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="name" label="房间名称" />
        <el-table-column prop="buildingName" label="所属楼栋" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="unbindRoom(scope.row)">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="drawer-footer">
        <el-button type="danger" :disabled="selectedRooms.length === 0" @click="batchUnbind">批量解绑</el-button>
      </div>
    </div>
    
    <!-- 关联房间弹窗 -->
    <AssociateRoomDialog
      v-model="associateDialogVisible"
      :face-lock-id="faceLockId"
      @success="loadRoomList"
    />
  </el-drawer>
</template>

<script setup name="FaceLockRoomsDrawer">
import { ref, computed, watch, getCurrentInstance } from 'vue'
import { getBoundRooms, batchUnbindRoom } from '@/api/device/faceLock.js'
import AssociateRoomDialog from './AssociateRoomDialog.vue'

const { proxy } = getCurrentInstance()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  faceLockId: {
    type: [Number, String],
    default: ''
  },
  faceLockName: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'refresh'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})

const loading = ref(false)
const roomList = ref([])
const selectedRooms = ref([])
const associateDialogVisible = ref(false)

watch(() => props.modelValue, (val) => {
  if (val && props.faceLockId) {
    loadRoomList()
  }
})

// 加载已绑定房间列表
function loadRoomList() {
  if (!props.faceLockId) return
  
  loading.value = true
  getBoundRooms(props.faceLockId).then(res => {
    roomList.value = res.data || []
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 表格选择变化
function handleSelectionChange(selection) {
  selectedRooms.value = selection
}

// 解绑单个房间
function unbindRoom(row) {
  proxy.$modal.confirm('确定要解绑该房间吗？').then(() => {
    const data = {
      faceLockIds: props.faceLockId,
      roomIds: row.roomId
    }
    
    batchUnbindRoom(data).then(() => {
      proxy.$modal.msgSuccess('解绑成功')
      loadRoomList()
      emit('refresh')
    })
  }).catch(() => {})
}

// 批量解绑房间
function batchUnbind() {
  if (selectedRooms.value.length === 0) return
  
  proxy.$modal.confirm('确定要解绑选中的房间吗？').then(() => {
    const roomIds = selectedRooms.value.map(item => item.roomId).join(',')
    
    const data = {
      faceLockIds: props.faceLockId,
      roomIds: roomIds
    }
    
    batchUnbindRoom(data).then(() => {
      proxy.$modal.msgSuccess('批量解绑成功')
      loadRoomList()
      emit('refresh')
    })
  }).catch(() => {})
}

// 打开关联房间弹窗
function openAssociateDialog() {
  associateDialogVisible.value = true
}

// 添加抽屉关闭事件处理
function onDrawerClosed() {
  // 通知父组件刷新列表
  emit('refresh')
}
</script>

<style scoped>
.drawer-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-header {
  margin-bottom: 15px;
}

.drawer-footer {
  margin-top: 15px;
  text-align: right;
}
</style> 